<template>
<div v-if="disPlayFlag">
    <div class="box-card">
        <div slot="header" class="clearfix job-tab-header">
            <span>角色权限配置(角色名称:{{roleName}})</span>
        </div>
        <div>
            <div class="treeArea">
                <el-tree ref='tree' :data="treeData" show-checkbox :props="defaultProps" :expand-on-click-node='false' node-key="id" :highlight-current='true' :default-expand-all='true'></el-tree>
            </div>
            <el-row :gutter="5">
                <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
                    <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
                    <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import {
  batchInsertItem,
  batchDeleteItem,
  selectMenuTree,
  compositeSelectSysRolePrivilege
} from '@/api/systemManage/roleManagementRoleEdit'

export default {
  name: 'userManagementRoleEdit',
  components: {},
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    roleName: {
      type: String,
      default: ''
    },
    roleid: {
      type: String,
      default: ''
    },
    subsysid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      oldMenuIdArr: []
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.editTree()
        }
      },
      immediate: true
    }
  },
  methods: {
    editTree() {
      console.log(this.subsysid)
      selectMenuTree(this.subsysid).then(response => {
        this.treeData = response.data.data
        const searchCon = {
          condition: {
            roleid: {
              property: 'roleid',
              value: this.roleid,
              type: 'EQ'
            }
          },
          fields: [
            'idSysPrivilegeId'
          ]
        }
        compositeSelectSysRolePrivilege(searchCon).then(response => {
          if (response.data.data.count > 0) {
            const resData = response.data.data.records[0]
            this.oldMenuIdArr.push(resData.idSysPrivilegeId)
          }
          this.$refs.tree.setCheckedKeys(this.oldMenuIdArr)
        })
      })
    },
    closeSelf() {
      this.$emit('closeMe')
    },
    saveData() {
      if (this.oldMenuIdArr.length > 0) {
        const condition = []
        for (const temp of this.oldMenuIdArr) {
          const input = {}
          input.roleid = this.roleid
          input.id = temp
          condition.push(input)
        }
        batchDeleteItem(condition).then(response => {
          const insertArr = []
          const checkedKeys = this.$refs.tree.getCheckedKeys()
          for (const temp of checkedKeys) {
            const input = {}
            input.roleid = this.roleid
            input.id = temp
            insertArr.push(input)
          }
          batchInsertItem(insertArr).then(response => {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('closeMe')
          })
        })
      } else {
        const insertArr = []
        const checkedKeys = this.$refs.tree.getCheckedKeys()
        for (const temp of checkedKeys) {
          const input = {}
          input.roleid = this.roleid
          input.id = temp
          insertArr.push(input)
        }
        batchInsertItem(insertArr).then(response => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.$emit('closeMe')
        })
      }
    }
  }
}
</script>

<style scoped>
.treeArea {
    max-height: 66vh;
    overflow-y: auto;
}
</style>
